<template>
    <div class="wechat-menu ">
        <div class="alert alert-info alert-dismissible fade show" role="alert">
            <strong>温馨提示!</strong>1、配置菜单;2、保存菜单;3、推送菜单至公众号
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div class="card">
            <div class="card-header">
                微信菜单
            </div>
            <div class="card-body d-flex ">
                <div class="view">
                    <header>
                        <img src="/attachments/wechat.png" alt="">
                    </header>
                    <footer>
                        <dl v-for="(menu,index) in button" :key="index">
                            <dt @click="edit(menu,index)" :class="{active:isActive(menu)}">
                                {{menu.name}}
                            </dt>

                            <dd v-for="(smenu,i) in menu.sub_button" :key="i" @click="edit(smenu,index)"
                                :class="{active:isActive(smenu)}" v-show="topId==index">
                                {{smenu.name}}
                            </dd>
                            <dd v-show="menu.sub_button.length<5 && topId==index" @click="add(menu,2)">
                                <i class="fa fa-plus text-secondary" aria-hidden="true"
                                ></i>
                            </dd>
                        </dl>
                        <dl v-if="button.length<3">
                            <dt @click="add(button,1)">
                                <i class="fa fa-plus text-secondary" aria-hidden="true"></i>
                            </dt>
                        </dl>
                    </footer>
                </div>
                <div class="edit flex-fill ml-2 border shadow-sm p-3 ml-3 d-flex flex-column">
                    <div class="flex-fill">
                        <div class="form-group">
                            <label>菜单名称</label>
                            <input type="text" placeholder="请输入菜单名称" class="form-control" v-model="menu.name">

                        </div>
                        <div class="form-group">
                            <label for="exampleFormControlSelect1">类型</label>
                            <select class="form-control" id="exampleFormControlSelect1" v-model="menu.type">
                                <option value="click">关键词</option>
                                <option value="view">链接</option>
                            </select>
                        </div>
                        <div class="form-group" v-if="menu.type=='click'">
                            <label>关键字</label>
                            <input type="text" class="form-control" v-model="menu.key">
                        </div>
                        <div class="form-group" v-if="menu.type=='view'">
                            <label>链接</label>
                            <input type="text" class="form-control" v-model="menu.url">
                        </div>
                    </div>
                    <div>
                        <button type="button" class="btn btn-outline-danger align-items-start" @click.prevent="del()">
                            删除菜单
                        </button>
                    </div>

                </div>

            </div>

        </div>

        <div class="btn-group" role="group" aria-label="Basic example">
            <button class="btn btn-primary mt-3" @click.prevent="submit">保存菜单</button>
            <button class="btn btn-outline-info mt-3" @click.prevent="push">推送微信菜单到微信公众号</button>
        </div>
    </div>
</template>
<script>
    export default {
        props: {
            siteid: {required: true},
            wechatid: {required: true}
        },
        data() {
            return {
                "button": [

                    {
                        "name": "菜单",
                        "sub_button": [
                            {
                                "type": "view",
                                "name": "搜索",
                                "url": "http://www.soso.com/"
                            },

                            {
                                "type": "click",
                                "name": "赞一下我们",
                                "key": "V1001_GOOD"
                            }]
                    }],
                menu: {},
                topId: 0,
            }
        }
        ,
        mounted() {
            if (this.wechatid) {
                this.get()
            }
            if (this.button.length > 0) {
                this.menu = this.button[0];
            }
        },

        methods: {
            edit(menu, index) {
                this.topId = index;
                this.menu = menu;
            },
            isActive(menu) {
                return menu == this.menu;
            }
            ,
            async get() {
                const response = await this.axios.get(`site/wechat/${this.siteid}/wechat/menu/${this.wechatid}`);
                this.button = response;
            },
            del() {
                //遍历一级菜单和二级菜单
                this.$confirm('确认删除吗？', '温馨提示').then(_ => {
                    this.button.map((menu, index) => {
                        if (menu == this.menu) {
                            return this.button.splice(index, 1);
                        }
                        menu.sub_button.map((smenu, sindex) => {
                            if (smenu == this.menu) {
                                return menu.sub_button.splice(sindex, 1);
                            }
                        })
                    });
                })

            }
            ,
            add(menus, level) {
                let num = 0;
                if (level == 1) {
                    if (menus.length == 3) {
                        this.$message.error('一级菜单只能添加三个');
                        return;
                    }
                    num = menus.push(
                        {'type': 'click', 'name': '菜单名称', "key": "V1001_TODAY_MUSIC", "sub_button": []}
                    )
                    this.menu = menus[num - 1];
                    this.topId = num - 1;
                }
                if (level == 2) {

                    if (!(menus.sub_button instanceof Array)) {
                        menus.sub_button = [];
                    }
                    if (menus.sub_button.length >= 5) {
                        this.$message.error('二级菜单只能添加五个');
                        return;
                    }

                    num = menus.sub_button.push({
                        "type": "view",
                        "name": "二级菜单",
                        'key': '',
                        "url": "http://www.soso.com/"
                    },)
                    this.menu = menus.sub_button[num - 1];
                }

            },
            async submit() {
                let url = `site/wechat/${this.siteid}/wechat/menu/${this.wechatid}`;
                await this.axios.put(url, {button: this.button});
            },
            async push() {
                let url = `site/wechat/${this.siteid}/wechat/menu/push/${this.wechatid}`;
                await this.axios.get(url);
                // location.href = `/wechat/${this.siteid}/wechat`;
            }
        }
    }
</script>
<style lang="scss">
    .wechat-menu {

        .view {
            width: 300px;
            height: 550px;
            border: 1px solid #dddddd;
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            header {

                img {
                    width: 100%;

                }

            }

            footer {
                display: flex;
                justify-content: space-between;

                dl {
                    flex: 1;
                    display: flex;
                    flex-direction: column-reverse;
                    margin: 0;
                    padding: 0;

                    dt, dd {
                        cursor: pointer;
                        display: flex;
                        background: #f1f1f1;
                        height: 40px;
                        align-items: center;
                        justify-content: center;
                        align-items: center;
                        border-top: solid 1px #7e7e7e;
                        border-left: solid 1px #7e7e7e;
                        border-right: solid 1px #7e7e7e;
                        border-bottom: none;
                        padding: 0;
                        margin: 0;

                        &.active {
                            border: #3AA5A2 solid 1px;
                        }

                    }

                }
            }
        }
    }

</style>
